import { useEffect, useState } from 'react'
import CopyToClipboard from 'react-copy-to-clipboard'
import { Table, Space, Dropdown, message } from 'antd'
import { useGetRecentList } from '@/hook'

const MyTable = () => {
  const { recent, updateRecentList, loading } = useGetRecentList()
  const [expandedRows, setExpandedRows] = useState([])

  useEffect(() => {
    updateRecentList()
  }, [updateRecentList])

  const handleExpandClick = (record) => {
    const expandedKeys = [...expandedRows]
    const index = expandedKeys.indexOf(record.key)

    if (index > -1) {
      expandedKeys.splice(index, 1)
    } else {
      expandedKeys.push(record.key)
    }

    setExpandedRows(expandedKeys)
  }

  const expandedRowRender = (record) => {
    const columns = [
      {
        title: '番组名',
        dataIndex: 'title',
        key: 'title',
        align: 'center',
      },
      {
        title: '发布时间',
        dataIndex: 'pubDate',
        key: 'pubDate',
        align: 'center',
      },
      {
        title: '下载',
        dataIndex: 'download',
        key: 'download',
        width: 100,
        align: 'center',
        render: (_, record) => (
          <Space size="middle">
            <Dropdown
              menu={{
                items,
                onClick: (e) => {
                  if (e.key === '1') {
                    const link = document.createElement('a')
                    link.href = record.magnetChain
                    link.click()
                  }
                  if (e.key === '2') {
                    const link = document.createElement('a')
                    link.href = record.enclosure
                    link.click()
                  }
                },
              }}
            >
              <a>
                <svg
                  t="1692620285467"
                  className="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="11973"
                  width="24"
                  height="24"
                >
                  <path
                    d="M894.9 615.9c-11 0-20 9-20 20l0.5 221.3c0 11-9 20-20 20l-682.2-0.3c-11 0-20-9-20-20l0.5-220c0-11-9-20-20-20H118c-11 0-20 9-20 20V908c0 11 2.4 20 5.3 20s14.3 0.1 25.3 0.1h4.8c11 0.1 29 0.1 40 0.1l681.4-0.7h61.4c6.5 0 11.8-9 11.8-20V635.9c0-11-9-20-20-20h-13.1z"
                    fill="#2680F0"
                    p-id="11974"
                  ></path>
                  <path
                    d="M753.9 401.4c7.8-7.8 20.5-7.8 28.3 0l10.7 10.7c7.8 7.8 7.8 20.5 0 28.3L527.2 706c-7.8 7.8-20.5 7.8-28.3 0L233.2 440.6c-7.8-7.8-7.8-20.5 0-28.3l10.7-10.7c7.8-7.8 20.5-7.8 28.3 0l199.5 199.5c7.8 7.8 14.1 5.1 14.1-5.9V117.6c0-11 9-20 20-20h15.1c11 0 20 9 20 20v476.8c0 11 6.4 13.6 14.1 5.9l198.9-198.9z"
                    fill="#2680F0"
                    p-id="11975"
                  ></path>
                </svg>
              </a>
            </Dropdown>
          </Space>
        ),
      },
    ]

    const data = []
    const addItemToData = (item) => {
      const pubDate = new Date(item.pubDate).toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
      })

      data.push({
        key: item.id ? `row-${item.id}` : item.key,
        title: (
          <div>
            {item.title}
            <CopyToClipboard
              text={item.magnetChain}
              onCopy={() => {
                message.success('磁链已复制')
              }}
            >
              <a title={item.magnetChain}>[复制磁链]</a>
            </CopyToClipboard>
          </div>
        ),
        enclosure: item.enclosure,
        pubDate: pubDate,
        magnetChain: item.magnetChain,
      })
    }

    if (record.mapVOList) {
      record.mapVOList.forEach((result) => {
        addItemToData(result)
      })
    } else {
      addItemToData(record)
    }

    return <Table columns={columns} dataSource={data} pagination={false} />
  }

  const columns = [
    {
      title: '近30天最新种子链接',
      dataIndex: 'poster',
      key: 'poster',
      width: 185,
      align: 'center',
    },
    {
      title: '番组名',
      dataIndex: 'title',
      key: 'title',
      align: 'center',
    },
    {
      title: '种子数',
      dataIndex: 'episodes',
      key: 'episodes',
      width: 100,
      align: 'center',
    },
  ]

  const items = [
    {
      key: '1',
      label: (
        <div style={{ fontSize: '13px', fontWeight: 'bold' }}>磁力链下载</div>
      ),
    },
    {
      key: '2',
      label: (
        <div style={{ fontSize: '13px', fontWeight: 'bold' }}>种子下载</div>
      ),
    },
  ]

  const expandedRowKeys = expandedRows.map((rowId) => rowId)

  const onRow = (record) => ({
    onClick: () => handleExpandClick(record),
  })

  const onExpand = (expanded, record) => {
    handleExpandClick(record)
  }

  return (
    <div>
      <Table
        dataSource={recent}
        columns={columns}
        expandable={{
          expandedRowRender,
          expandedRowKeys,
          onExpand,
        }}
        onRow={onRow}
        loading={loading}
      />
    </div>
  )
}

export default MyTable
